import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Header from './components/layout/Header'
import Footer from './components/layout/Footer'
import HomePage from './pages/HomePage'
import ComponentDemo from './pages/ComponentDemo'
import JSXDemo from './components/JSXDemo'
import JSXReference from './components/JSXReference'
import CardDemo from './components/CardDemo'
import JSXvsHTML from './components/JSXvsHTML'
import JSXInfoDisplay from './components/JSXInfoDisplay'
import JSXJavaScript from './components/JSXJavaScript'
import PropsDemo from './components/PropsDemo'
import MyFirstComponent from './components/MyFirstComponent'
import ImportExportDemo from './components/ImportExportDemo'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="app">
      <Header />
      
      <main className="main-content">
        <HomePage />
        <ComponentDemo />
        <JSXDemo />
        <JSXReference />
        <CardDemo />
        <JSXvsHTML />
        <JSXInfoDisplay />
        <JSXJavaScript />
        <PropsDemo />
      </main>
      
      <Footer />
    </div>
  )
}

export default App
